$(document).ready(function() {
	
	$('.viewuser').click(function(event){
		event.preventDefault();
		$(".overlayHolder").fadeToggle("fast");
		var name = $(this).attr('data-name');
		var birthday = $(this).attr('data-birthday');
		var address = $(this).attr('data-address');
		var contact = $(this).attr('data-contact');
		var email = $(this).attr('data-email');
		var stat = $(this).attr('data-status');
		var country = $(this).attr('data-country');
		var home = $(this).attr('data-hometown');
		var prov = $(this).attr('data-prov');

		overlayBox = '';
		overlayBox += '<div class="confirmationHolder">';
			overlayBox += '<div class="headerConfirm"><i class="icon-user"></i> '+name+' <div class="close doCancel" style="top:0;right:0;float:right;"><i class="icon-remove icon-white"></i></div></div>';
			overlayBox += '<div class="confirmationContent" >';
			
				overlayBox += '<div class="row" >';
					overlayBox += '<div class="span7">';
						overlayBox += '<div class="span2">';
											overlayBox +='<h5>Name:</h5>'+name;
							overlayBox +='<h5>Email :</h5>'+email;
							overlayBox +='<h5>Civil Status</h5>'+stat;
						overlayBox += '</div>';
						overlayBox += '<div class="span2">';
							overlayBox +='<h5>Birthday:</h5>'+birthday;
							overlayBox +='<h5>Address:</h5>'+address;
							overlayBox +='<h5>Contact No:</h5>'+contact;
						overlayBox += '</div>';
							overlayBox += '<div class="span2">';
								overlayBox +='<h5>Country:</h5>'+country;
								overlayBox +='<h5>Hometown:</h5>'+home;
								overlayBox +='<h5>Province</h5>'+prov;
						overlayBox += '</div>';
					overlayBox += '</div>';
				overlayBox += '</div>';
			overlayBox += '</div >';
		overlayBox += '</div >';

		$('.boxOverlayContent').html(overlayBox);
				$('.doCancel').click(function(){
			$(".overlayHolder").hide();
		});
	});
	$('.closeOverlay').click(function(){
		$(this).css({
			'display':'none'
		});	
	});


});